@*
* Copyright 2016 LinkedIn Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*@

@(flowDefPair: IdUrlPair, graphType: String, results: java.util.Map[IdUrlPair, java.util.Map[IdUrlPair, java.util.List[models.AppResult]]],
        idPairToJobNameMap: java.util.Map[IdUrlPair, String], flowExecTimeList: java.util.List[Long])

@import com.linkedin.drelephant.util.Utils;
@import com.linkedin.drelephant.analysis.Severity
@import scala.Predef; var jobDefIndex = 0

@getSeverityColor(severity : Severity) = @{
  var color: String  = "#5cb85c"; // LOW or NONE

  if(severity.getText.equalsIgnoreCase("CRITICAL")) {
    color = "#d9534f"
  } else if(severity.getText.equalsIgnoreCase("SEVERE")) {
    color = "#e4804e"
  } else if(severity.getText.equalsIgnoreCase("MODERATE")) {
    color = "#f0ad4e"
  }

  color
}

@if(results != null && results.nonEmpty) {
  @tags.panel(){ Flow History Results: <a href="@flowDefPair.getUrl" style="font-size:14px; color:#083d8d">@flowDefPair.getId</a>} {

    @if(graphType.equals("resources")) {
      <script src="@routes.Assets.at("js/flowresourcehistoryform.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("js/graphresourcesmetricsutility.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("js/resourcegraphtooltiputility.js")" type="text/javascript"></script>
    } else  {
      <script src="@routes.Assets.at("js/flowtimehistoryform.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("js/graphtimemetricsutility.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("js/timegraphtooltiputility.js")" type="text/javascript"></script>
    }


    <div>

        <!-- Performance Score Graph -->
      <div style="width:1078px; height:350px">
        <img src="@routes.Assets.at("images/loading.gif")" id="loading-indicator" alt="Loading..."
        style="position:relative;left:50%;top:40%;display:none;"/>
        <svg id="visualisation" width="100%" height="100%" style="overflow:visible"></svg>
      </div>

      <hr>

        <!-- The tabular results -->
      <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th  style="min-width:200px">Flow Executions</th>
              @for((jobDefPair, jobName) <- idPairToJobNameMap) {
                <th  style="min-width : 380px ;padding:0px;">
                  <a href='./jobhistory?job-def-id=@helper.urlEncode(jobDefPair.getUrl)&select-graph-type=@graphType' data-toggle='tooltip'
                  title='@jobDefPair.getUrl'>Job @{jobDefIndex = jobDefIndex + 1; jobDefIndex}<br>
                    @if(jobName.length > 45) { @jobName.substring(0, 41)... } else { @jobName }
                  </a>
                  <table style="padding:0px; margin: 0px; height:100%; width:100%">
                    <tr><td>
                      <!-- div containing the header table -->
                      <div style="height:100%; width:100%;  display: block">

                        <table class="table" style="height:100%; width:100%; display: table; border-collapse: collapse; margin:0px; padding:0px">

                          <tbody style="height:100%;">
                            <tr style="text-align: center;">
                              <td class="used-resource-td hasTooltip" style="width: 95px"><img src='@routes.Assets.at("images/usedmemory.png")' class="metrics-icons-table" alt='used resources'/>
                                <div id="tooltip-div">
                                  <span> The resources used by the stage in GB Hours</span>
                                </div>
                              </td>
                              <td class="wasted-resource-td hasTooltip" style="width: 95px"><img src='@routes.Assets.at("images/wastedmemory.png")' class="metrics-icons-table" alt='wasted resources'/>
                                <div id="tooltip-div">
                                  <span> The total resources wasted by the stage in GB Hours</span>
                                </div>
                              </td>
                              <td class="run-time-td hasTooltip" style="width: 95px"><img src='@routes.Assets.at("images/runtime.png")' class="metrics-icons-table" alt='total runtime'/>
                                <div id="tooltip-div">
                                  <span> The total running time of the stage in HH:MM:SS</span>
                                </div>
                              </td>
                              <td class="wait-time-td hasTooltip" style="width: 95px"><img src='@routes.Assets.at("images/waittime.png")' class="metrics-icons-table" alt='total wait time'/>
                                <div id="tooltip-div">
                                  <span> The total wait time for the stage in HH:MM:SS</span>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </td></tr>
                  </table>
                </th>
              }
            </tr>
          </thead>

          <tbody>
          @for((flowExecPair, jobMap) <- results) {
            <tr>

                <!-- The First column, execution id -->
              <td style="text-align:center">
                <a class="exectime" href='@flowExecPair.getUrl' data-toggle='tooltip' title='@flowExecPair.getUrl'>Loading...</a>
              </td>

                <!-- The remaining columns -->
              @for((jobDefPair, jobName) <- idPairToJobNameMap) {
                <td style="height: 35px; padding:0; margin:0">
                @if(jobMap.get(jobDefPair) != null) {

                  <div style="height:100%; width:100%;  display: block">

                    <table class="table" style="height:100%; width:100%; display: table; border-collapse: collapse; margin:0px; padding:0px">

                      <tbody style="height:100%;">
                        <tr style="text-align: center;">
                          <td class="used-resource-td hasTooltip" style="width: 95px">@Utils.getResourceInGBHours(Utils.getTotalResources(jobMap.get(jobDefPair)) ).split("GB")(0)
                          </td>
                          <td class="wasted-resource-td hasTooltip" style="width: 95px">@Utils.getResourceInGBHours(Utils.getTotalWastedResources(jobMap.get(jobDefPair)) ).split("GB")(0)
                          </td>
                          <td class="run-time-td hasTooltip" style="width: 95px">@(Utils.getDurationBreakdown(Utils.getTotalRuntime(jobMap.get(jobDefPair))).split("Hours")(0))
                          </td>
                          <td class="wait-time-td hasTooltip" style="width: 95px">@(Utils.getDurationBreakdown(Utils.getTotalWaittime(jobMap.get(jobDefPair))).split("Hours")(0))
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                }
                </td>
              }
            </tr>

          }
          </tbody>

        </table>
      </div>
    </div>
  }
}